<template>
  <div id="liveGift">
    <h1 class="con-right-title">
      直播间抽奖配置
    </h1>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <topSearch
        @addGift="addGift"
        @toSearch="toSearch"
        :formInline="formInline"
        :activityList="activityList"
      />
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column label="抽奖图标" min-width="80" align="center">
        <template v-slot="{ row }">
          <div class="img-inner-box">
            <el-image :src="row.iconImg"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="频道号"
        prop="goodName"
        min-width="180"
        align="center"
      >
        <template v-slot="{ row }">
          {{ row.channelId }}
        </template>
      </el-table-column>
      <el-table-column
        label="活动名称"
        prop="goodName"
        min-width="180"
        align="center"
      >
        <template v-slot="{ row }">
          {{ row.activityName }}
        </template>
      </el-table-column>
      <el-table-column
        label="活动类型"
        prop="goodName"
        min-width="180"
        align="center"
      >
        <template v-slot="{ row }">
          <span v-if="row.activityType == 'INVITE_ACTIVITY'">邀请活动</span>
          <span v-if="row.activityType == 'TURNTABLE_LOTTERY'">转盘抽奖活动</span>
          <span v-if="row.activityType == 'GONGGE_LOTTERY'">宫格抽奖活动</span>
          <span v-if="row.activityType == 'TURNOVER_DRAW_LOTTERY'">翻牌抽奖活动</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100" align="center">
        <template v-slot="{ row }">
          <span v-if="row.activityStatus == 'OVER'">已结束</span>
          <span v-if="row.activityStatus == 'NOT_STARTED'">未开始</span>
          <span v-if="row.activityStatus == 'ONGOING'">进行中</span>
          <span v-if="row.activityStatus == 'DELETE'">已删除</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人"
        prop="goodName"
        min-width="180"
        align="center"
      >
        <template v-slot="{ row }">
          {{ row.operator }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作时间"
        prop="goodName"
        min-width="180"
        align="center"
      >
        <template v-slot="{ row }">
          {{ row.operateTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="250">
        <template v-slot="{ row, $index }">
          <el-button
            v-if="row.status && row.activityStatus!=='OVER'"
            type="text"
            @click="handleGoodsDisable(row, $index)"
          >
            下架
          </el-button>
          <el-button v-if="!row.status && row.activityStatus!=='OVER'" type="text" @click="handleGoodsEnable(row, $index)">
            上架
          </el-button>
          <el-button v-if="row.activityStatus!=='OVER' && row.status !==true" type="text" @click="editGift(row, $index)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pageCom
      :searchParams="searchParams"
      @searchList="searchList"
      :total="total"
    ></pageCom>
    <!-- 新增弹窗 -->
    <edit-dialog
      :postCommandModel="postCommandModel"
      :activityList="activityList"
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
      :activityStatus="activityStatus"
      :activityStatuEnums="activityStatuEnums"
    />
  </div>
</template>

<script>
import {
  getLuckyDrawList,
  putLiveGiftList,
  putLuckyDrawList,
  postLuckyDrawList,
  getActivityList
} from '@/api/appSetting/lotteryAllocation'
import topSearch from './topSearch'
import editDialog from './editDialog' //新增/编辑弹窗

let initDialogData = {
  isShow: false, // 控制弹框显示
  type: 'add',
  index: '',
  formData: {
    goodEnabled: 'N',
    iconImg: '',
    goodName: '',
    id: ''
  }
}
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      formInline: {
        time: [],
        activityName: '',
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        activityId: ''
      },
      editDialogData: initDialogData,
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      modifyCommandModel: {
        id: '', // 抽奖的id
        status: false, // 抽奖的上下架状态
      },
      activityList: [], // 活动列表
      postCommandModel: {
        activityId: '',
        channelId: '',
        iconImg: '',
        id: ''
      },
      activityStatuEnums: ['ALL'], // 获取活动列表参数
      activityStatus: '' // 活动状态
    }
  },
  components: {
    editDialog,
    topSearch
  },
  mounted() {
    this.searchList()
  },
  created() {
    this.getActivityList()
  },
  methods: {
    // 初始查询列表
    searchList() {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      getLuckyDrawList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 查询按钮
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 获取活动
    getActivityList() {
      
      getActivityList(
        {activityStatuEnums: this.activityStatuEnums},
        (res) => {
          this.activityList = res
        },
        (err) => {
          console.log(err)
        }
      )
    },
    // 添加礼物
    addGift() {
      // if (this.tableData.length >= 8) {
      //   this.$message.warning('礼物达到最大限制')
      //   return
      // }
      this.activityStatuEnums = ['NOT_STARTED','ONGOING']
      this.editDialogData = initDialogData
      this.editDialogData.isShow = true
      this.editDialogData.type = 'add'
      this.postCommandModel = {}
    },
    // 编辑礼物
    editGift(row, index) {
      this.activityStatus = row.activityStatus
      this.activityStatuEnums = ['NOT_STARTED','ONGOING']
      this.editDialogData.type = 'edit'
      this.editDialogData.isShow = true
      this.postCommandModel = row
    },
    //下架
    handleGoodsDisable(row, index) {
      this.modifyCommandModel.id = row.id
      this.modifyCommandModel.status = false
      this.changeLiveGiftList(this.modifyCommandModel)
    },
    // 上架
    handleGoodsEnable(row, index) {
      this.modifyCommandModel.id = row.id
      this.modifyCommandModel.status = true
      this.changeLiveGiftList(this.modifyCommandModel)
    },
    // 统一修改上架请求接口
    changeLiveGiftList(data) {
      putLiveGiftList(
        data,
        (response) => {
          if (data.status === false) {
            // this.$message.success('下架成功')
          } else {
            // this.$message.success('上架成功')
          }
          this.searchList()
        },
        (response) => {
          console.log(response)
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 新增、编辑后，刷新列表 */
    refresh(data) {
      this.postCommandModel = data
      const { index, type } = this.editDialogData
      if (type === 'edit') {
        this.putLuckyDrawList(data)
      } else {
        // 新增
        this.postCommandModel.id = ''
        this.postLuckyDrawList(data)
      }
    },
    // 修改
    putLuckyDrawList(data) {
      putLuckyDrawList(
        data,
        (res) => {
          this.searchList()
        },
        (err) => {
          this.$message.warning(err.message)
          console.log(err)
        }
      )
    },
    // 新增
    postLuckyDrawList(data) {
      postLuckyDrawList(
        data,
        (res) => {
          this.searchList()
        },
        (err) => {
          this.$message.warning(err.message)
          console.log(err)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.img-inner-box {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-image {
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
  }

  img {
    max-width: 100% !important;
    max-height: 100% !important;
    cursor: pointer;
  }
}
</style>
